const { dest } = require('gulp')
const gulp = require('gulp'),
        htmlmin = require('gulp-htmlmin'),
        cleancss = require('gulp-clean-css'),
        uglify = require('gulp-uglify'),
        babel = require('gulp-babel'),
        connect = require('gulp-connect'),
        sass = require('gulp-sass'),
        del = require('del')

const paths = {
    html:{
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css:{
        src: 'src/css/**/*.scss',
        dest: 'dist/css'
    },
    js: {
        src: 'src/js/**/*.js',
        dest: 'dist/js'
    },
    images: {
        src: 'src/images/**',
        dest: 'dist/images'
    },
    libs: {
        src: 'src/libs/**',
        dest: 'dist/libs'
    }
}

const delDist = () => del('dist')
    

const html = () => {
    return gulp.src(paths.html.src)
    .pipe(htmlmin({
        removeComments: true,//清除HTML注释
        	collapseWhitespace: true,//压缩HTML
        	collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
      		removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      		removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
      		removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      		minifyJS: true,//压缩页面JS
      		minifyCSS: true//压缩页面CSS 
    }))
    .pipe(gulp.dest(paths.html.dest))
    .pipe(connect.reload())
}
const css = () => {
    return gulp.src(paths.css.src)
    .pipe(sass())
    .pipe(cleancss())
    .pipe(gulp.dest(paths.css.dest))
    .pipe(connect.reload())
}
const js = () => {
    return gulp.src(paths.js.src)
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(connect.reload())
}
const images = () => {
    return gulp.src(paths.images.src)
    .pipe(gulp.dest(paths.images.dest))
}
const libs = () => {
    return gulp.src(paths.libs.src)
    .pipe(gulp.dest(paths.libs.dest))
}
const server = () => {
    connect.server({
        root:'dist',
        port: 1234,
        livereload: true
    })
}
// module.exports = {
//     html,
//     css,
//     js,
//     images,
//     libs,
//     server
// }

const watch = () => {
    gulp.watch(paths.html.src, html)
    gulp.watch(paths.css.src, css)
    gulp.watch(paths.js.src, js)
}
module.exports.default = gulp.series(delDist, gulp.parallel(html,css,js,images,libs,server,watch))